<!-- 
	添加单据弹窗
 -->
<template>
	<view class="u-bill-modal">
		<image src="../../static/image/bill/add_img.png" mode="aspectFit" class="u-add-bill-btn" @tap="showModal"></image>
		<view class="u-modal bottom-modal" :class="[show ? 'z-show' : '']" @tap.stop="hideModal">
			<view class="u-dialog bottom-modal" @tap.stop>
				<view class="g-modal-title f-por f-tac f-bc-whilte">
					<text class="f-fz18 f-fc-primary f-fw650">单据新建</text>
					<view class="f-fcen close-box" @tap="hideModal">
						<text class="icon-close f-fc-cf"></text>
					</view>
				</view>
				<view class="g-modal-content f-frowspcen f-fwrap f-bc-whilte">
					<view class="u-bill-item f-fcolcenx" v-for="item in billList" :key="item.id" @tap="toPage(item.pagePath)">
						<image :src="item.iconPath" mode="aspectFit" class="icon"></image>
						<text class="f-fz15 f-fc-primary f-mt13">{{ item.title }}</text>
					</view>
				</view>
				<view class="g-modal-bottom f-fcen f-fz18 f-fc-primary f-bc-whilte f-mt5" @tap="hideModal">
					取消
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				billList: [
					{
						id: 'bill1',
						iconPath: '../../static/image/bill/purchase_img.png',
						pagePath: '/pages/purchase/add',
						title: '采购单'
					},
					{
						id: 'bill2',
						iconPath: '../../static/image/bill/money_img.png',
						pagePath: '/pages/withdraw/add',
						title: '请款单'
					},
					{
						id: 'bill3',
						iconPath: '../../static/image/bill/input_img.png',
						pagePath: '/pages/input/list',
						title: '入库'
					},
					{
						id: 'bill4',
						iconPath: '../../static/image/bill/sale_img.png',
						pagePath: '/pages/sale/add',
						title: '销售单'
					},
					{
						id: 'bill5',
						iconPath: '../../static/image/bill/output_img.png',
						pagePath: '/pages/output/list',
						title: '出库'
					}
				]
			};
		},
		methods: {
			/**
			 * showModal
			 * */ 
			showModal() {
				this.show = true;
			},
			/**
			 * hideModal
			 * */ 
			hideModal() {
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-bill-modal {
		.u-add-bill-btn {
			position: fixed;
			right: 66rpx;
			bottom: 48rpx;
			z-index: 997;
			width: 68rpx;
			height: 68rpx;
		}
		.u-dialog {
			background-color: #F5F5F5;
			.g-modal-title {
				height: 90rpx;
				line-height: 90rpx;
				.close-box {
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
			.g-modal-content {
				padding: 0 20rpx;
				.u-bill-item {
					padding: 20rpx 40rpx;
					.icon {
						width: 95rpx;
						height: 95rpx;
					}
					
				}
			}
			.g-modal-bottom {
				height: 100rpx;
			}
		}
	}
</style>
